<template>
    <div class="shop" ref="shopTarget">
        <div class="goods_books">经典好书</div>
        <div 
        v-masonry transition-duration="0.3s" 
        i tem-selector=".item"
        percent-position="true"
        fit-width="true"
        ref="waterfallTarget"
        >
        <!-- percentPosition: true可以使宽度为百分比的组件不改变他们原本的位置。 -->
            <div v-masonry-tile 
            class="goods_content" 
            v-for="item in goodsData" 
            :key="item.id"
             @click="goDetail(item.id)"
             >
                <div class="goods_img">
             <img :src="item.s_goods_photos[0].path" >
                </div> 
        <div class="shop_content">
            <p class="shop_content_one">{{item.desc}}</p>
            <div class="demo">
                <div class="manjian">满减</div>
                    <p class="shop_content_three">￥{{item.price}}</p> 
                    <p class="shop_content_four">找相似</p> 
             </div>
        </div>
      </div>
    </div>
</div> 
</template>
<script setup>
import{ ref,defineProps,defineEmits,onUpdated,nextTick}from 'vue'
import {delayPrint} from '../../../utils/index'
import {useRouter} from 'vue-router'
import {useStore}from 'vuex'
import {get}from '../../../utils/request'
let shopTarget=ref(null)
let waterfallTarget=ref(null)
const emits=defineEmits(['go'])
const router=useRouter()
const store=useStore()
onUpdated(()=>{
   setTimeout(()=>{
 nextTick(function () {
    let a=waterfallTarget.value.style.height.slice(0,-2)
          shopTarget.value.style.height = Number(a) + 100 + "px";
  });
  },1000)
 
})

function cb(){
  const{scrollHeight,scrollTop,clientHeight}=document.documentElement
  if(scrollHeight-scrollTop-2<=clientHeight){
    emits('go')
    console.log(111);
  }
}

let props=defineProps({
    goodsData: {
        type: Array
    }
});
console.log(props.goodsData);
const goDetail=id=>{
    store.state.routerType = 'push';
    router.push('/detail?id='+id)
}

document.addEventListener('scroll',delayPrint(800,cb))

</script>
<style lang="scss" scoped>

.goods_books{
    margin-top:0.16rem;
    margin-left:0.16rem;
    width: 0.72rem;
    height: 0.25rem;
    font-size:0.18rem;
    font-weight:550;
}


.goods_content{
   margin-right:0.10rem;
   margin-left:0.08rem;
    width:45vw;
    height:auto;
  .goods_img{    
    width: 45vw;
    height: auto;
    img{
        margin-top:0.16rem;
        display: block;
        width: 100%;
        height: auto;
       
    }
}
}
.manjian{
    border:1px solid #E93B3B;
    color:#E93B3B;
}
.shop_content_one{
    margin-top:0.08rem;
    margin-left:0.16rem;
  display: -webkit-box;  
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;  
    overflow: hidden; 
    word-break: break-all;

    font-size:0.16rem;
    color:black;

}
.demo{
    display: flex;
    justify-content: flex-start;
     margin-top:0.08rem;
     width:43vw;
     height: 0.16rem;
       margin-left:0.16rem;
  
}
.shop_content_three{
     margin-top:-0.05rem;
    margin-left:0.08rem;
   
    font-size:0.16rem;
    color:#E93B3B;

}
.shop_content_four{
     margin-top:-0.03rem;
    margin-left:0.16rem;
    font-size:0.12rem;
 color:#B7B7B7;
}
</style>